<template>
  <div class="Meraiders" ref="homePage">
    <van-nav-bar title="我的攻略" left-arrow @click-left="onClickLeft" />
    <div style="width: 100%;height: 46px;"></div>
   <!-- <div style="position: fixed;bottom: 5%;right: 4%;display: flex;align-items: center;justify-content: center;" @click="UploadRaiders">
      <div style="position: absolute;background: white;width: 40px;height: 40px;border-radius: 15px;"></div>
      <van-icon name="add" style="font-size: 60px !important;" />
    </div> -->

    <div class="Raiders_bottm">
      <div class="bottm_div" @click="RaidersDetails">
        <div class="div_img">
          <img width="100%" height="100%" src="../../assets/400.jpg" />
        </div>
        <div class="div_content">
          <p class="div_txt">深圳小众拍照圣地最好看的斑马线</p>
          <div class="div_bottm">
            <span>2019-11-31</span>
            <span style="display: flex;align-items: center;"><van-icon name="like" />999</span>
          </div>
        </div>
      </div>
      <div class="bottm_div" @click="RaidersDetails">
        <div class="div_img">
          <img width="100%" height="100%" src="../../assets/400.jpg" />
        </div>
        <div class="div_content">
          <p class="div_txt">深圳小众拍照圣地最好看的斑马线</p>
          <div class="div_bottm">
            <span>2019-11-31</span>
            <span style="display: flex;align-items: center;"><van-icon name="like" />999</span>
          </div>
        </div>
      </div>


    </div>
  </div>
</template>

<script>
  export default {

    data() {
      return {
        clintHeigth: '', //获取页面高度


      }
    },
    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';

    },
    methods: {
      onClickLeft() {
        this.$router.go(-1);
      },
      RaidersDetails() {
        this.$router.push({
          path: "/Raiders/RaidersDetails",

        })
      },
      UploadRaiders() {
        this.$router.push({
          path: "/Raiders/UploadRaiders",

        })
      },
    }
  }
</script>

<style lang="scss">
  .Meraiders {
    background: white;

    .van-nav-bar {
      border-bottom: 1px solid #e4e4e4;

      .van-nav-bar__left {
        .van-icon {
          color: #46d0ca;
          font-size: 18px;
        }
      }

      .van-nav-bar__title {
        color: #000000;
      }
    }

    .Raiders_bottm {
      width: 100%;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      margin-top: 10px;
      .bottm_div{
        width: 47%;
        height: 250px;
        display: flex;
        flex-direction: column;
        background: #cccccc;
        margin-bottom: 20px;
        // margin: 20px;

        .div_content {
          width: 100%;
          height: 35%;
          display: flex;
          flex-direction: column;
          padding: 0 5px;

          .div_txt {
            width: 100%;
            height: 40px;
            // line-height: 15px;

            overflow: hidden;
            // white-space: nowrap;
            // text-overflow: ellipsis;
          }

          .div_bottm {
            display: flex;
            justify-content: space-between;
            align-items: center;

            div {
              display: flex;
              align-items: center;
            }

          }
        }
      }
    }


  }
</style>
